<template>
    <div ref="showPanel3">
        <div class="Dialog" v-show="fxList[0].isShowFx">
            <!-- 在首页不显示cha -->
            <span class="iconfont cha" v-show="fxList[0].type != 'homeFx'" @click="show()" >&#xe61a;</span>
            <slot name='title'></slot>
            <div class="zf-box">
               <ul>
                <li>
                    <div><span class="iconfont">&#xe63b;</span></div>
                    <span>云音乐动态</span>
                </li>
                <li>
                    <div><span class="iconfont">&#xe917;</span></div>
                    <span>私信分享</span>
                </li>
                <li>
                    <div><span class="iconfont">&#xe917;</span></div>
                    <span>微信好友</span>
                </li>
                <li>
                    <div><span class="iconfont">&#xe917;</span></div>
                    <span>QQ空间</span>
                </li>
                <li>
                    <div><span class="iconfont">&#xe917;</span></div>
                    <span @click="show()">QQ好友</span>
                </li>
                <li>
                    <div><span class="iconfont">&#xf010b;</span></div>
                    <span>微博</span>
                </li>
                <li>
                    <div><span class="iconfont">&#xf010b;</span></div>
                    <span>复制链接</span>
                    
                </li>
               </ul>
            </div> 
        </div>
    </div>
</template>
<script>
export default {
   data() {
    return {
        num:"Dialog",
        contentFrind:[],
        bgButton:'',
        value:{
            title:''
        }
        // isShowZf:this.data[2]
  
    }
   },
   props:{
     fxList:{
            typeof:Object || Array,
            default:_=>{
                return{}
            }
        },
   },
   watch:{
    // value:{
    //     handler(newValue,oldValue){
    //         this.value.title =  newValue.title
    //          console.log('哈哈'+this.value.title)
    //     },
    //     deep:true
    // }
   },
   mounted(){
    //  console.log(this.fxList)
        document.addEventListener('click',(e)=>{
       if(this.$refs.showPanel3 ){
            let tefFx = this.fxList[0].refFx.contains(e.target)
           let isSelf = this.$refs.showPanel3.contains(e.target)
           if(!isSelf && !tefFx){
            this.$emit("FxSoon",false)
           }
       }
   })
   },
   created(){
    
    },
   methods:{
    //点击叉消失
    
    show(){
        this.$emit("FxSoon", !this.fxList[0].isShowFx)
    },
    handle(){
        // console.log(this.$refs.showPanel3)
        //   this.$emit(this.$refs.showPanel3, this.fxList[0].refValue)

    }

   }  
}
</script>
<style lang="less" scoped>
    .iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
}
.Dialog{
    z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
   
    background: white;
    border-radius: 20px;
    width: 350px;
   
    text-align: center;
   position:fixed;
   top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    span{

        cursor: pointer;
          text-align: right;
        // margin: 6px 0;
    }
    .cha{
        font-size: 20px;
        color: black;
        display: block;
        margin: 18px 26px 0 0;
    }
    .cha:hover{
        color: #9F9F9F;
    }
   span[name='title']{
    font-size: 20px;
    font-weight: 800;
     color: black;
     text-align: left;
    margin-left: 24px;
    display: block;
  margin-top: 10px;
   }


   .zf-box{
    margin-top: 10px;
    height:  fit-content ;
    box-sizing: border-box;
    position: relative;
  
    ul{
        margin-bottom: 20px;
        li:hover{
            background: #F4F4F4;
        }
        li{

             padding: 10px 20px;
             display: flex;
            align-items: center;
            div:first-child{
                padding: 5px;
                background: #FF3A3A;
                border-radius: 50%;
                span{
                    font-size: 22px;
                    color: white;
                }
            }
        span{
            font-size: 16px;
        }
        span:nth-child(2){
            margin-left: 10px;
        }
        }
    }


  }
}
   
</style>